<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My gallery</title>
        <link rel="stylesheet"  type="text/css" href="<spring:url value="/resources/css/bootstrap.css" />" />
        <link rel="stylesheet" type="text/css" href="<spring:url value="/resources/css/jquery.fancybox.css" />" />
        <link rel="stylesheet" type="text/css" href="<spring:url value="/resources/css/templates.css" />"/>
        <style type="text/css" media="screen">
            #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
                background-image: url('<spring:url value="/resources/img/fancybox_sprite.png" />');
            }
            #fancybox-loading div {
                background: url('<spring:url value="/resources/img/fancybox_loading.gif" />') center center no-repeat;
            }
            .fancybox-nav {
                background: transparent url('<spring:url value="/resources/img/blank.gif" />'); /* helps IE */
            }
            .fancybox-overlay {
                background: url('<spring:url value="/resources/img/fancybox_overlay.png" />');
            }
            .loading-indicator {
                height: 80px;
                width: 80px;
                background: url('<spring:url value="/resources/img/loading.gif" />') no-repeat center center;
            }
            .thumbnails-holder a img{
                display: inline-block;
                margin-bottom: 4px;
                margin-left: 4px;
                max-height: 200px;
                max-width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="container">
                <div class="masthead">
                    <security:authorize access="hasAnyRole('ROLE_ADMIN', 'ROLE_USER')">
                        <a href="<spring:url value="/j_spring_security_logout" />" class="btn pull-right">Logout</a>
                        <a href="<spring:url value="/profile" />" title="Profile" class="btn-link pull-right" style="padding-right: 5px">
                        <security:authentication property="principal.username" />
                        </a>
                    </security:authorize>
                    <h3 class="muted">Pretty good gallery</h3>
                    <jsp:include page="templates/navbar.jsp"/>
                </div>
                <a href="<spring:url value="/gallery/upload" />" role="button" class="btn" data-toggle="modal">   <!-- TODO: Make nice -->
                    Add something new <i class="icon-plus"></i>
                </a>
                <div id="gallery-holder" class="thumbnails-holder"></div>
            </div>
            <div id="push" ></div>
        </div>
        <jsp:include page="templates/footer.jsp" />
        <script src="<spring:url value="/resources/js/jquery-2.0.0.js" />"></script>
        <script src="<spring:url value="/resources/js/bootstrap.js" />"></script>
        <script src="<spring:url value="/resources/js/jquery.fancybox.js" />"></script>
        <script src="<spring:url value="/resources/js/templates.js" />"></script>
        <script>
            var currentAmount = 0, isPreviousEventComplete = false, isDataAvailable = true, availableLoadItems = 10;

            $(document).ready(function() {
                loadThumbnails();

                $(".fancybox").fancybox({
                    openEffect	: 'none',
                    closeEffect	: 'none'
                });
            });

            $(window).scroll(function () {
                if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
                    if (isPreviousEventComplete && isDataAvailable) {
                        isPreviousEventComplete = false;
                        loadThumbnails();
                    }
                }
            });

            function loadThumbnails() {
                var loadThumbnailsUrl = "<spring:url value="/gallery/update" />";

                $.getJSON(loadThumbnailsUrl, { fromItem: currentAmount }).done(
                        function(json) {
                            var thumbnails = [];

                            $.each(json, function(key, value) {
                                thumbnails.push(
                                        '<a class="fancybox" rel="gallery" href="' + '<spring:url value="/gallery/img/" />' + value + '.jpg' + '">' +
                                            '<img class="img-polaroid " src="' + '<spring:url value="/gallery/img/thumb/" />' + value + '.jpg' + '" />' +
                                        '</a>'
                                );
                            });

                            $("#gallery-holder").append(thumbnails.join(''));

                            currentAmount += json.length;
                            isPreviousEventComplete = true;

                            if (json.length < availableLoadItems) isDataAvailable = false;
                        }
                ).fail(function() {
                    $("#response-result").text("Something goes wrong.");
                });
            }
        </script>
    </body>
</html>